<template>
  <!---------- 配合tree.vue使用 ---------->
  <li class="tree-item" :class="{'expand': treeItemData.expand,'active':activeId===treeItemData.id ,'no-child': !treeItemData.children || treeItemData.children.length === 0}">
    <div class="tree-content" @click="_clickEvent(treeItemData)">
      <div class="tree-label">{{ treeItemData.name }}</div>
    </div>
    <ul v-if="treeItemData.children && treeItemData.children.length > 0" class="sub-tree">
      <!--TreeItem组件中调用TreeItem组件-->
      <TreeItem
        v-for="(item,index) in treeItemData.children"
        :key="item.id"
        :tree-item-data="item"
        :active-id="activeId"
        :tree-click-event="treeClickEvent"
      />
    </ul>
  </li>
</template>

<script>
export default {
  name: 'TreeItem',
  props: {
    treeItemData: {
      type: Object,
      default() {
        return {}
      }
    },
    activeId: {
      type: Number,
      default: -1
    },
    // 节点点击事件
    treeClickEvent: {
      type: Function,
      default() {
        return function() {}
      }
    }
  },
  data() {
    return {
    }
  },
  methods: {
    // 节点点击事件
    _clickEvent(item) {
      this.$forceUpdate()
      // 如果有传递事件函数，则调用事件函数并传递当前节点数据及组件
      if (this.treeClickEvent && typeof this.treeClickEvent === 'function') {
        this.treeClickEvent(item, this)
      }
    }
  }
}
</script>
